﻿@model VideoChat.Models.RoomModel
@{
    ViewBag.Title = "Room";
}
<h2>Личный чат</h2>
<div class="modal fade" id="call_modal">
    <div class="modal-header">
        <h3>Вызов завершён</h3>
    </div>
    <div class="modal-body">
        Собеседник завершил разговор
    </div>
    <div class="modal-footer">
        <button class="btn btn-success" type="button" onclick="document.location='@Url.Action("index")';">
            Вернуться в общий чат
        </button>
        <button class="btn" type="button" onclick="CloseAlert();">
            Остаться
        </button>
    </div>
</div>
<div id="videoState" class="alert alert-info" style="display: none;">
    Оцените качество связи:
    <button class="btn btn-success" type="button" onclick="SaveVideoState(3);">
        Видно и слышно
    </button>
    <button class="btn btn-warning" type="button" onclick="SaveVideoState(2);">Только видно
    </button>
    <button class="btn btn-warning" type="button" onclick="SaveVideoState(1);">Только слышно
    </button>
    <button class="btn btn-danger" type="button" onclick="SaveVideoState(0);">
        Не видно и не слышно
    </button>
</div>
@{
    ViewBag.Title = "Личный чат";
}
@section scripts
{
    <script type="text/javascript">
    // For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection.
    var swfVersionStr = "11.1.0";
    // To use express install, set to playerProductInstall.swf, otherwise the empty string.
    var xiSwfUrlStr = "playerProductInstall.swf";
    var flashvars = {};
    flashvars.talkId = '@Model.RoomKey';
    flashvars.publish = '@Model.MyKey';
    flashvars.subscribe = '@Model.CalleeKey';
    var start = new Date();
    start.setSeconds(start.getSeconds() + 20);
    flashvars.start = start.getTime();
    flashvars.length = '10';
    var params = {};
    params.quality = "high";
    params.bgcolor = "#ffffff";
    params.allowscriptaccess = "sameDomain";
    params.allowfullscreen = "true";
    var attributes = {};
    attributes.id = "video_rtmp_test";
    attributes.name = "video_rtmp_test";
    attributes.align = "middle";
    swfobject.embedSWF(
                '@Url.Content("~/Content/swf/video_rtmp.swf")', "flashContent",
                "560", "450",
                swfVersionStr, xiSwfUrlStr,
                flashvars, params, attributes);
    // JavaScript enabled so display the flashContent div in case it is not replaced with a swf object.
    swfobject.createCSS("#flashContent", "display:block;text-align:left;");
    </script>
    <script type="text/javascript">
    var CHAT = {};
    var OPTIONS = {};


    $(function () {
        $(".chat_content").fixHeight(function () { return $('#video').height() - 168; });

        $("#login_modal").modal('hide');
        $("#userName").html('@Model.MyName');
        OPTIONS.MyName = '@Model.MyName';
        OPTIONS.RoomKey = '@Model.RoomKey';
        CHAT = $.connection.chat;

        CHAT.OnSend = OnSend;
        CHAT.OnJoinRoom = OnJoinRoom;
        CHAT.leave = function (connectId) {
            if (connectId == '@Model.CalleePublicKey') {
                window.onbeforeunload = undefined;
                $("#call_modal").modal();
            }
        };

        $("#msg").keydown(function (e) {
            if (e.keyCode == 13 && !e.shiftKey) {
                Send();
                return false;
            }
            return true;
        });

        $.connection.hub.start(function () {
            CHAT.joinRoom(OPTIONS.RoomKey, OPTIONS.MyName);
        });

        window.onbeforeunload = function (e) {
            e = e || window.event;

            $.ajax({
                url: '@Url.Action("CloseRoom", "Home", new {roomKey = @Model.RoomKey})',
                cache: false,
                type: "POST",
                contentType: "application/json;charset=utf-8"
            });

            var message = 'Завершить разговор?';
            if (e)
                e.returnValue = message; // IE
            return message; // Safari
        };

        setTimeout(function () { $("#videoState").show(); }, 10000);
    });

    function Send() {
        var messageInput = $("#msg"),
                msg = {
                    'SenderName': OPTIONS.MyName,
                    'RoomKey': OPTIONS.RoomKey,
                    'Content': messageInput.val()
                };
        CHAT.send(msg);
        messageInput.val("");
        messageInput.focus();
    }

    function OnSend(msg) {
        var chatContent = $(".chat_content"),
                msgClass = 'chat_message';
        if (msg.SenderName == OPTIONS.MyName)
            msgClass += ' chat_mes_my';
        chatContent.append(
                '<div class="' + msgClass + '"><div class="chat_mes_title"><span class="name">' +
                    msg.SenderName +
                    '</span><span class="date">' + msg.FormattedDate + '</span></div><div class="chat_mes_text">' +
                    msg.Content +
                    '</div></div>');
        chatContent.scrollTop(chatContent[0].scrollHeight - chatContent.height());
    }

    function OnJoinRoom(key) {
        OPTIONS.MyKey = key;
    }

    function CloseAlert() {
        $("#call_modal").modal('hide');
    }

    function SaveVideoState(state) {
        $.ajax({
            url: '@Url.Action("UpdateRoomState", "Home")' + '?roomKey=@Model.RoomKey' + '&state=' + state,
            cache: false,
            type: "POST",
            contentType: "application/json;charset=utf-8",
            statusCode: {
                200: function (data) {
                    $("#videoState").remove();
                }
            }
        });
    }
    </script>
}
<div class="row-fluid">
    <div id="video" class="span7 well">
        <h4>Разговор с @Model.CalleeName</h4>
        <script type="text/javascript" src="@Url.Content("~/Content/swf/swfobject.js")"></script>
        <script type="text/javascript" src="@Url.Content("~/Content/swf/history/history.js")"></script>
        <div id="flashContent">
            <p>
                To view this page ensure that Adobe Flash Player version 11.1.0 or greater is installed.
            </p>
            <script type="text/javascript">
    var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://");
    document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='"
                    + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>");
            </script>
        </div>
        <noscript>
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="560" height="450"
                id="VideoPhone">
                <param name="movie" value="@Url.Content("~/Content/swf/video_rtmp.swf")" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#ffffff" />
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="allowFullScreen" value="true" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="@Url.Content("~/Content/swf/video_rtmp.swf")" width="560" height="450">
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#ffffff" />
                    <param name="allowScriptAccess" value="sameDomain" />
                    <param name="allowFullScreen" value="true" />
                    <!--<![endif]-->
                    <!--[if gte IE 6]>-->
                    <p>
                        Either scripts and active content are not permitted to run or Adobe Flash Player
                        version 11.1.0 or greater is not installed.
                    </p>
                    <!--<![endif]-->
                    <a href="http://www.adobe.com/go/getflashplayer">
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
                            alt="Get Adobe Flash Player" />
                    </a>
                    <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </noscript>
        <button class="btn btn-danger" type="button" onclick="document.location='@Url.Action("Index", "Home")'">
            Завершить разговор
        </button>
    </div>
    <div id="room_chat" class="span5 well">
        <h4>Чат</h4>
        Опишите, пожалуйста, качество видео и звука в чате
        <div id="chat">
            <div class="chat_content">
            </div>
        </div>
        <div class="chat_form">
            <form action="#">
            <button class="btn btn-success" type="button" onclick="Send();">
                Отправить
            </button>
            <div class="chat_field">
                <textarea id="msg" placeholder="Сообщение"></textarea>
            </div>
            </form>
        </div>
    </div>
</div>
